<!-- html标签支持window相关的属性 -->
<html
 window-width="800px"
 window-height="600px"
>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>sciter的dom编程</h2>
        <div id="root"></div>
        <div#myid>id缩写</div>
        <div.myclass>class缩写</div>
    </body>

    <script>
        // document是文档根节点
        // document主要实现查找子元素内容
        /* 
        document.querySelector("selector")
        document.$("selector") 等价于上面
        document.querySelectorAll("selector")
        document.$$("selector")等级于上面
        document.getElementById("id")
        */
       
        let root = document.querySelector("#root");
        // 以及创建子元素
        /* 
        document.createElement()
        document.createTextNode()
        document.createComment()
        document.createDocumentFragment()
        document.createNodeIterator(root[, whatToShow[, filter]])返回NodeIterator
        */
        let divEl = document.createElement("div");
        let spanEl = document.createElement("span");
        let textNode = document.createTextNode("文本节点内容");
        spanEl.appendChild(textNode);
        divEl.appendChild(spanEl);
        root.appendChild(divEl);
        let com = document.createComment("注释内容");
        divEl.appendChild(com);
        // 这种dom的编程方式是旧时代的编程方式 
        // 具体的还有事件注册,样式修改等
        // 可以参考文档 这里简单看下文档
        divEl.addEventListener("click",() => {
            console.log("点击事件");
        })
        // Sciter内置jquery的事件机制
        divEl.on("click",() => {
            console.log("jquery的点击事件");
        })
        // 这种dom编程形式 是第一代web编程模型 主要实现是jquery
        // sciter内置jquery大部分的功能操作
        // 具体参考文档和demo

        // 下面主要说下sciter内置的jsx编程模式 
        // jsx编程是现在主流的虚拟dom编程模式, 
        // sciter内置jsx编程,可以使用类似reactjs,vue等的虚拟dom编程

    </script>
    </html>